/*
 * @Author: xiehangyun 
 * @Date: 2025-02-20 09:27:53 
 * @Last Modified by: xiehangyun
 * @Last Modified time: 2025-02-20 17:32:29
 */
import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./croppingModel.module.less";
import { Modal, Spin } from "antd";
import croppingModelStore from "./croppingModelStore";
import fabricCropping from "./fabricCropping";
import utils from "@/utils/utils";
import utilsServer from "@/api/services/utilsServer";
import designEditor from "@/editorComponent/designEditor";
import FabricImage from "@/myFabric/FabricImage";

interface Iprops {
  children?: ReactNode
}

// 裁剪弹窗
export default function CroppingModel() {

  const dom = useRef<HTMLDivElement | null>(null);
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
  }, []);

  useEffect(() => autorun(() => {
    if (croppingModelStore.url) {
      fabricCropping.setBackgroundImage(croppingModelStore.url);
      setOpen(true);
    } else {
      setOpen(false);
      fabricCropping.setBackgroundImage("");
    }
  }, { delay: 30 }), []);

  useEffect(() => autorun(() => {
    setLoading(croppingModelStore.loading);
  }), []);

  //确定裁剪
  const onOk = async () => {
    croppingModelStore.setLoading(true);
    // 获取裁剪后的图片
    const file = await fabricCropping.cropImage();
    // 上传图片
    const url = await utilsServer.uploadOss(file);

    const activeObject = designEditor.fabricCanvas.getActiveObject();
    if (activeObject && activeObject.type === "image") {
      const originWidth = activeObject.getScaledWidth();
      const originHeight = activeObject.getScaledHeight();
      (activeObject as FabricImage).setSrc(utils.ossSuffix(url, 500), () => {
        //计算裁剪参数
        var boundingRect = fabricCropping.clippingRect.getBoundingRect();
        const scale = Math.max(boundingRect.width / fabricCropping.bgWidth, boundingRect.height / fabricCropping.bgHeight);
        const targetWidth = originWidth * scale;
        const targetHeight = originHeight * scale;
        const newScele = Math.min(targetWidth / activeObject.width!, targetHeight / activeObject.height!);
        activeObject.scaleX! = newScele;
        activeObject.scaleY! = newScele;
        activeObject.top! += ((boundingRect.top + (boundingRect.height / 2)) - 250) * (originHeight / fabricCropping.bgHeight);
        activeObject.left! += ((boundingRect.left + (boundingRect.width / 2)) - 250) * (originWidth / fabricCropping.bgWidth);
        designEditor.render();
      });
    }

    croppingModelStore.setLoading(false);
    croppingModelStore.setUrl("");
  }

  return (
    <Modal
      open={open}
      centered
      width={544}
      closable={false}
      title="图片裁剪"
      onCancel={() => croppingModelStore.setUrl("")}
      onOk={onOk}
      maskClosable={false}
    >
      <div className={styles.croppingModel} >
        <Spin spinning={loading} >
          <div
            ref={dom => fabricCropping.setContainer(dom)}
            className={styles.canvasContainer}
          ></div>
        </Spin>
      </div>
    </Modal>
  );
}